<template>
  <header>
    <div class="content">
      <div class="left">
        <h1><router-link to="/home" class="logo"><img src="../assets/images/logo.png" alt=""></router-link></h1>
        <router-link to="/home"><p>尙医通 挂号预约挂号统一平台</p></router-link>
      </div>
      <div class="right">
        <p>帮助中心</p>
        <p @click="showLogin" v-if="!userStore.userInfo?.name">登录/注册</p>
        <el-dropdown v-else  @command="handleCommand">
    <span class="el-dropdown-link">
      {{userStore.userInfo.name}}
      <el-icon class="el-icon--right">
        <arrow-down />
      </el-icon>
    </span>
          <template #dropdown>
            <el-dropdown-menu >
              <el-dropdown-item command="a">实名认证</el-dropdown-item>
              <el-dropdown-item command="b">挂号订单</el-dropdown-item>
              <el-dropdown-item command="c">就诊人管理</el-dropdown-item>
              <el-dropdown-item command="d" @click="logOut" >退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>

  </header>
</template>

<script setup lang="ts">
import useUserStore from "@/store/modules/user";
import {ArrowDown} from "@element-plus/icons-vue";
import {useRouter} from "vue-router";

let userStore = useUserStore();
let $router = useRouter();



let showLogin = () => {
  userStore.showLogin = true;
} // 点击登录展示Login组件
let logOut = () => {
  userStore.logOut();
  $router.push({path:'/home'});
} //点击用户退出登录

//处理点击下拉菜单选项
const  handleCommand = (command:string) => {
  switch (command) {
    case "a":
      $router.push({path:'/user/certification'})
      break;
    case "b":
      $router.push({path:'/user/order'})
      break;
    case "c":
      $router.push({path:'/user/patient'})
      break;
    case "d":
      logOut(); //用户退出登录
      break;
  }
}

</script>

<style scoped lang="less">
header {
  display: flex;
  position: fixed;
  z-index: 999;
  justify-content: center;
  width: 100%;
  height: 70px;
  background: #fff;

  .content {
    display: flex;
    justify-content: space-between;
    width: 1200px;
    height: 100%;

    .left {
      display: flex;
      justify-content: center;
      align-items: center;

      a {
        img {
          width: 50px;
          height: 50px;
          margin-right: 10px;
        }
      }

      p {
        color: #55a6fe;
      }

    }

    .right {
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;

      p:nth-child(1) {
        margin-right: 10px;
      }

      p {
        font-size: 14px;
        color: #bbb;
      }
    }
  }
}
</style>